// 首页页面跳转
function change(num) {
    var _span = document.querySelectorAll('.tab span');
    var _main = document.querySelectorAll('.main');
    for (var i = 0; i < _span.length; i++) {
        _span[i].className = '';
        _main[i].style.display = 'none';
    }
    _span[num].className = 'active';
    _main[num].style.display = 'block';
    console.log(num);
    getData(num) 
}


      // 2. 声明一个函数, 用来获取服务器端的数据
      function getData(type) {
        // 获取后台数据的代码...
        // dataUrl是服务器数据所在地址
        var dataUrl = 'http://81.71.65.4:3008/film/list?type='+(type+1);
        /**
         * 这段代码先照抄, 大概的意思是: 上面我们导入了axios.js, 
         * 然后这个js给我们提供了一个对象axios, 对象里有一个方法get,
         * 可以帮我们拿到服务器的数据, 格式就是下面这么的, 其中
         * dataUrl是服务器数据所在地址, 拿到数据之后, aixos对象的get方法会把数据放入result这个变量 
         */
        axios.get(dataUrl).then(function(result) {
          // 我们的要的电影列表数据就放在result.data.data里
          var list = result.data.data;
        //   console.log(list);
          // 接下来就是把这个列表数据展示在页面上, 之前大家都做过了
            var listStr = '';
            for(var i=0;i<list.length;i++){
                var numStr = '';
                if(list[i].grade == undefined){
                    numStr += `
                    <li>
                    <span>观众评分</span>
                    <span class="ping">${''}</span>
                    </li>
                    `;
                }else{
                    numStr += `
                    <li>
                    <span>观众评分</span>
                    <span class="ping">${list[i].grade}</span>
                    </li>
                    `;
                }
                listStr +=`
                <a href="./filmxiang.html" class="list">
                <div class="list f14">
                    <img src="${list[i].poster}" alt="">
                    <div class="list-center">
                        <li>
                            <span class="f14">${list[i].name}</span>
                            <span class="D">${list[i].filmType.dx}</span>
                        </li>
                        ${numStr}
                        <li>主演:${list[i].director}</li>
                        <li>${list[i].nation }| ${list[i].runtime}分钟</li>
                    </div>
                    <li class="gou">购票</li>
                </div>
            </a>
                `;

            }

            document.querySelectorAll('.main')[type].innerHTML = listStr; 
        });
      }
      getData(0);
